<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录-MCAKE</title>
    <link rel="stylesheet" href="nav.css">
    <link rel="stylesheet" href="reg.css">
    <link rel="stylesheet" href="bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="footer.css">
 
</head>
<body>  
        <div class="navigation-bar">
                <div class="logo-box">
                    <img src="logo.png" alt="">
                </div>
               <div class="navigation-bar-top">
                   
                  <div class="wallbox-wallcenter">
                       <!-- /* 这是购物车那一栏 */ -->
                      <div class="wallbox-walltop">
   
                          <div class="shopping-box">
                               <!-- 购物车盒子 -->
                                  <ul>
                                      <li><a href="">
                                          <img src="shopping.png" alt="" class="gowuche">
                                          购物车
                                       </a></li>
                                      <li><a href="http://127.0.0.1:8080/login.html">登录</a></li>
                                      <li><a href="cake-reg.html">注册</a></li>
                                  </ul>
                            

                          </div>
                      </div>
                      <div class="wallbox-wallbottom">
                       <!-- 四个导航栏模块  -->
                          <div class="navigation-bar-bottom">
                             <ul>
                                 <li class="underline"><a href="CAKE.html">Nos Produits<br>
                                               <span> 全部产品</span>
                                               </a>  
                                               </li>
                                 <li class="border1">
                                     <a href="./otherHTML/napoleon.html">Napoléon<br>
                                 <span>拿破仑系列</span> 
                                    </a>
                                </li>
                                 <li class="border2">
                                    <a href="">Événements<br>
                                 <span>热门活动</span> 
                                   </a>
                               </li>
                                 <li>
                                       <a href="">Mon M'CAKE<br>
                                    <span>会员中心</span>  
                                      </a>
                               </li>
                             </ul>
                             <div class="phone">
                                <div class="phone-box">
                                    <div> 
                                        <img src="电话.png" alt=""> 
                                        <span><a href="#">4006-123-099</a> </span>
                                    </div>
                                    <div>
                                           <img src="laba.png" alt=""> 
                                           <span class="pei"><a href="#">配送范围查询</a></span>
                                 </div>
                                </div>
                                <!-- 地标 -->
                              <div class="sites">
                                   <ul class="site">
                                       <li>
                                       <img src="地址.png" alt="">
                                           <a href="">上海市 </a>  
                                       </li>
                                   </ul>                               
                               </div>            
                             </div>
                          </div>                
                      </div>
                  </div>        
               </div>
            </div>
  


 <div class="banner-bg">
   <table></table>
   <div class="reg">
    <div class="reg-box">     
        <ul class="reg-ul">
            <li>
                <h1>会员注册</h1>
            </li>
            <li>
             <input placeholder="请输入用户名" type="text" id="uname" onblur="namedrop()" onfocus="nameget()"> <span id="uname_span"></span>

            </li>
            <li>
            <input placeholder="请输入密码" type="text" id="upwd" onblur="mimadrop()" onfocus="mimaget()"><span id="uname_upwd"></span>
            </li>
            <li>
             <input placeholder="请确认密码" type="text" id="cpwd" onblur="cpwddrop()" onfocus="cpwdget()"> <span id="cpwd_span"></span>	

            </li>
            <li>
            <input placeholder="请输入邮箱地址" type="text" id="email" onfocus="emailget()" onblur="emaildrop()">
            <span id="email_sapn"></span>

            </li>
            <li>
            <input placeholder="请输入11位手机号" type="text" id="phone"  onblur="phonedrop()" onfocus="phoneget()"> <span id="phone_sapn"></span><br>
            </li>

            <li>
            <input placeholder="您的真实姓名" type="text" id="user_name" onfocus="u_nameget()" onblur="u_namedrop()"><br>	
            <span id="u_name_sapn"></span>
            </li>
            <li>
             
             <input type="checkbox" id="xieyi">同意《M'cake购物协议》
              <span>   
             <input type="radio" id="man" name="gender" checked>男
             <input type="radio" id="woman" name="gender">女
            </span>
            </li>

            <li>
              <button type="button" class="btn btn-info" onclick="getdata()">注册</button>
            </li>
        </ul>      
 </div>
 <div class="others-login">
  <h5>其他登录方式</h5>
  <div>
   <a href=""><span onclick="authorize('alipay');" class="zfb on"></span></a> 
    <a href=""><span onclick="authorize('weibo');" class="wb"></span></a>
  </div>
  <p class="have-id">还没有账号?</p>
  <div>  <button id="reger">立即注册</button> </div>
</div>


</div>
</div>   

<!-- script代码 -->
    <script>
        function getdata(){
           //接收数据
           var $uname=uname.value;
         if(!$uname||$uname==""){
             alert("用户名为空");
               return;
           }
       //console.log($uname);
       //xhr 4
       //1.
           var xhr=new XMLHttpRequest();
       //4.接收响应数据
                xhr.onreadystatechange=function(){
                   if(xhr.readyState==4 && xhr.status==200){
                    var result=xhr.responseText;
                    console.log(result);
                    if(result=="1"){
                        alert("用户已被注册");
                        return;
                    }else{
                        //调用注册的函数
                       insert();
                    }      
                    }
                   }
                   
               //2.
               xhr.open("get","/pro/v1/seluser/"+$uname,true)
               //3
                xhr.send();  
                }
       
        function insert(){
         //获取数据
            var $uname=uname.value;
             if($uname.length<2 || $uname.length>6){
                   uname_span.innerHTML="请输入3~6位的用户名";
                   alert("请输入3~6位的用户名");
                   return;
             } 
            var $upwd=upwd.value;
            var $cpwd=cpwd.value;
            if($cpwd!==$upwd){
              alert("两次密码输入不一致");
                return;
            }
            var $email=email.value;
            var i=$email.search(/^\w+[@]\w{2,5}([.]\w{2,3}){1,3}$/i);
            if(i==-1){
                 alert("邮箱格式不对");
                   return;
                }
            var $phone=phone.value;
            if($phone.length!==11){
              alert("请输入有效的手机号格式");
                return;
            }
            var $user_name=user_name.value;    
                var $gender="1";
               if(man.checked){
                    $gender="1";
               }else{
                    $gender="0"; 
               }	
           //xhr
           //1.
           var xhr=new XMLHttpRequest();
          //4.
         xhr.onreadystatechange=function(){
             if(xhr.readyState==4&&xhr.status==200){
                  var result=xhr.responseText;
                 if(result=="1"){
                             alert("注册成功");
                           }else{
                            alert("注册失败");
                           } 
               }
       
           }
       //2.
        xhr.open("post","/pro/v1/reguser",true);
       //post设置响应头
       //设置请求头
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                   var formdata="uname="+$uname+"&upwd="+$upwd+"&email="+$email+"&phone="+$phone+"&user_name="+$user_name+"&gender="+$gender;
               //3.
               xhr.send(formdata);
                
                }
          
       
       
  function namedrop(){
        uname.placeholder="请输入用户名";
        if(uname.value==""){
         uname_span.innerHTML="请输入用户名";
        }else if(uname.value.length<2||uname.value.length>6){
          uname_span.innerHTML="用户名格式错误";
          alert("用户名格式错误");
          return;
        }else{
          uname_span.innerHTML="有效的用户名"; 
        }
       }
  function nameget(){
        uname.placeholder="";
         uname_span.innerHTML="请输入2~6位的用户名";
        } 
       
  function mimadrop(){
          upwd.placeholder="请输入密码";
          if(upwd.value==""){
             uname_upwd.innerHTML="密码不能为空";
            }else if(upwd.value.length<6 ||  upwd.value.length>12){
               uname_upwd.innerHTML="格式错误";
            }else{
              uname_upwd.innerHTML="正确";
            }
         
        }
       
   function mimaget(){
        upwd.placeholder="";
         uname_upwd.innerHTML="长度在6~12";
       }
   function cpwddrop(){
        cpwd.placeholder="请确认密码";
          if(cpwd.value==""){
             cpwd_span.innerHTML="密码不能为空";
            }else if(cpwd.value.length<6 ||  cpwd.value.length>12){
               cpwd_span.innerHTML="格式错误";
            }else if(cpwd.value!==upwd.value){
              cpwd_span.innerHTML="两次密码输入不一致";
            }else{
              cpwd_span.innerHTML="正确";
            }
         
        }
       
   function cpwdget(){
        cpwd.placeholder="";
         cpwd_span.innerHTML="长度在6~12";
       }
   function phonedrop(){
           phone.placeholder="请输入手机号";
          if(phone.value==""){
             phone_sapn.innerHTML="手机号不能为空";
            }else if(phone.value.length<11 ||  phone.value.length>11){
               phone_sapn.innerHTML="请输入11位手机号";
            }else{
              phone_sapn.innerHTML="正确";
            }
         
        }
  function emailget(){
        email.placeholder="";
           } 
           function phoneget(){
        phone.placeholder="";
           } 
   function emaildrop(){
        var $email=email.value;
          email.placeholder="请输入邮箱号";
       var i=$email.search(/^\w+[@]\w{2,5}([.]\w{2,3}){1,3}$/i);
          if(email.value==""){
            email_sapn.innerHTML="邮箱号不能为空";
            }else if(i==-1){
               email_sapn.innerHTML=`<span id="email_sapn" style="color:red">邮箱格式错误</span>`;
               return;
              }else{
                email_sapn.innerHTML=`<span id="email_sapn" style="color:green">邮箱格式正确</span>`
            }
            
        
//  if(i!==-1){
//    document.write(``)

//  }else{
//     document.write(`<h1 style="color:black">邮箱格式正确</h1>`) 
//  }





         
        }         
           
  function u_nameget(){
        user_name.placeholder="";
           } 
   function  u_namedrop(){
        user_name.placeholder="你的真实姓名";
          if( u_name.value==""){
            u_name_sapn.innerHTML="真实姓名不能为空";
            }else if( u_name.value.length<2 ||  u_name.value.length>10){
              u_name_sapn.innerHTML="请输入有效姓名";
            }else{
              u_name_sapn.innerHTML="正确";
            }
            
           
         
        }             
    </script>



<!-- footer部分 -->
<div>
<div class="footer">
  <div class="footer-wallbox">
    <div class="m_copy">
      <p class="icp_no">客服热线：4006-678-678（8:00 - 22:00）</p>
      <p>客服邮箱：cs@mcake.com</p>
    </div>
    <div class="foot_nav">
       <div class="discover">
         <h4 class="discover-ico">发现</h4>
         <p>公告</p>
         <p class="wb-wb"></p>
         <p class="wx-wx"></p>
       </div>
       <dl class="footer-dl">
         <dt>关于我们</dt>
         <dd>企业介绍</dd>
         <dd>媒体合作</dd>
         <dd>招贤纳士</dd>
         <dd>呼叫中心</dd>
       </dl>
       <dl class="footer-dl">
         <dt>帮助中心</dt>
         <dd>投诉与建议</dd>
         <dd>会员权益</dd>
         <dd>购物指南</dd>
         <dd>支付类</dd>
         <dd>订单相关</dd>
         <dd>配送服务</dd>
       </dl>
    </div>

  </div>
 

</div>

<div class="copyright">
   <div class="copy-right">
     <table>
       <tr>
         <td class="longleft">上海卡法电子商务有限公司</td>
         <td class="long">上海卡法电子商务有限公司北京分公司</td>
         <td>上海卡法电子商务有限公司杭州分公司</td>
       </tr>
       <tr>
         <td>地址：上海市普陀区同普路1130弄3号楼 </td>
         <td>地址：北京市朝阳区东四环中路82号3座04层505</td>
         <td>地址：杭州市拱墅区中环大厦607室</td>
       </tr>
       <tr>
         <td>电话：021-52691591</td>
         <td>电话：010-52088262</td>
         <td>电话：010-52088262</td>
       </tr>
       <tr>
         <td>社会信用代码：913101070678091460</td>
         <td>社会信用代码：913101070678091460</td>
         <td>社会信用代码：913101070678091460</td>
       </tr>
       <tr>
         <td>食品经营许可证：JY13101070034251</td>
         <td>食品经营许可证：JY13101070034251</td>
         <td>食品经营许可证：JY13101070034251</td>
       </tr>
       <tr>
         <td>食品生产许可证：SC12431010700121</td>
         <td></td>
         <td></td>
       </tr>
     </table>
   </div>
   <p class="last-copy">Copyright © 2012-2019 上海卡法电子商务有限公司 版权所有
    </p>
</div>
</div>


    
</body>
</html>